<template>
  <div class="home"
       v-if='lastOrderData'>
    <div class="header">
      <scroll-view>
        <div class="header-notice"
             @click="goTo('/pages/home/notifyList')"
             v-if='notifyData&&notifyData.length'>
          <div class="laba">
            <img src="/static/image/laba@2x.png"
                 alt="">
          </div>
          <div class="content">
            <text v-for='item in notifyData'
                  :key='item'> {{item.notifyTitle}}</text>
          </div>

        </div>
      </scroll-view>
      <!-- 已授权登录 -->
      <div class="header-userinfo"
           v-if='store.userInfo&&store.userInfo.nickName'>
        <div class="userinfo-wrap ">
          <div class="userinfo-nickname ">
            <div class="lf-img"><img :src="store.userInfo.avatarUrl"
                   alt="头像"></div>

            <div class="rt-name">
              <div>{{store.userInfo.nickName}}</div>
              <div>账号 : {{phone}}</div>
            </div>
          </div>
          <div class="jms"
               v-if="lastOrderData&&lastOrderData.JiaMengShang"> {{lastOrderData.JiaMengShang.ZH_Name}}</div>
        </div>
      </div>
      <!-- 未授权 显示按钮 -->
      <div class="header-userinfo not-authorization"
           v-else>
        <div class="userinfo-wrap ">
          <div class="userinfo-nickname ">
            <div class="lf-img">
              <img src="http://xcxcdn.shuiqoo.cn/click.png"
                   alt="">
            </div>

            <div class="rt-name">
              <button open-type="getUserInfo"
                      @getuserinfo='getUserInfo'>点击授权</button>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="content-main"
         v-if='lastOrderData&&lastOrderData.LastBuyProducts.length'>
      <div class="last-purchase">
        <div class="purchase-timer">
          <div>
            <span></span>上一单商品清单</div>
          <!-- <div>2018-08-80 16:12</div> -->
        </div>
        <div class="purchase-goods">

          <scroll-view scroll-x="true"
                       class="goods-list">
            <ul>
              <li v-for="item in lastOrderData.LastBuyProducts"
                  :key="item">
                <img :src="item.SP_Picture"
                     alt=""
                     mode="widthFix">
              </li>
            </ul>
          </scroll-view>
          <div class="buy-again ">
            <mp-button :title="'再次购买'"
                       :size="'large'"
                       @btnClick="buyAgain ">

            </mp-button>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <ul class="fun-bar">
        <li @click="goToTab('/pages/chooseAnOffer/index')">
          <div><img src="/static/image/price-active@2x.png"
                 alt=""></div>
          <div>报价</div>
        </li>
        <li @click="goTo('/pages/chooseAnOffer/giftOfGoods?showAll=true')">
          <div><img src="/static/image/zengp@2x.png"
                 alt=""></div>
          <div>赠品</div>
        </li>
        <li @click="goToTab('/pages/order/index')">
          <div><img src="/static/image/searh@2x.png"
                 alt=""></div>
          <div>查询</div>
        </li>
        <li @click="goToTab('/pages/user/index')">
          <div><img src="/static/image/zhanghu-active@2x.png"
                 alt=""></div>
          <div>账户</div>
        </li>
      </ul>
    </div>
    <div class='versions'>1.7.0</div>
  </div>
</template>

<script>

import { mapMutations } from 'vuex'
import MpButton from '@/components/button'
import locationModal from '@/components/locationModal'
import { EvianLastBuyProduct, LiteappUserinfoSubscribe, LiteappNotify } from '@/api/api'

export default {
  data () {
    return {
      userPhone: '',
      userCode: '',
      userInfo: {},
      lastOrderData: null,
      isShowLocation: false,
      notifyData: null
    }
  },
  components: {
    MpButton,
    locationModal
  },
  computed: {
    store () {
      return this.$store.state
    },
    phone () {
      let loginData = this.$store.state.loginData
      if (loginData && typeof loginData.cellPhone !== 'object') {
        let cellPhone = loginData.cellPhone
        return cellPhone.slice(0, 3) + '****' + cellPhone.slice(7)
      }
    }

  },
  mounted () {

  },

  onShow () {
    this.getEvianLastBuyProduct()
    this.getLiteappNotify()
  },
  methods: {

    async getEvianLastBuyProduct () {
      let resData = await EvianLastBuyProduct()
      this.lastOrderData = resData
    },
    async  getLiteappNotify () {
      this.notifyData = await LiteappNotify()
    },
    getUserInfo (e) {
      if (e.target.rawData) {
        let userInfo = JSON.parse(e.target.rawData)
        this.setuserInfo(userInfo)
        if (this.store.loginData.isDownload === false) {
          LiteappUserinfoSubscribe(userInfo)
        }
      }
    },
    buyAgain () {
      this.$wx.getStore('bzGoods', 'DELETE')
      let lastOrderData = this.lastOrderData
      let newArr = []
      let newBJArr = []
      for (let key of lastOrderData.LastBuyProducts) {
        key.settleStyle = '付款'
        key.isSelect = true
        key.number = 1
        if (key.JiaGeLeiXing === '报价') {
          newArr.push(key)
        } else {
          newBJArr.push(key)
        }
      }

      let newRemBJArr = []
      for (let key of newBJArr) {
        newRemBJArr.push({
          'SPShuXing': '',
          'SPMingCheng': key.SPMingcheng,
          'SPJianCheng': '',
          'HuoHao': key.HuoHao,
          'SPDanWei': key.SPDanWei,
          'SP_price': key.BJ_price,
          'SP_ID': key.SP_ID,
          'JiaGeLeiXing': key.JiaGeLeiXing,
          'Pic': key.SP_Picture,
          'number': key.ShuLiang,
          'KH_LeiXing_ID': key.KH_LeiXing_ID,
          'KHLeiXing': key.kh_typeName,
          'KH_ID': key.KH_ID,
          'KH_bianHao': key.KH_bianHao,
          'isSelect': true
        })
      }
      if (newArr.length) {
        newArr[0].KH_LeiXing_ID = newArr[0].KH_LeiXing_ID
        newArr[0].KHLeiXing = newArr[0].kh_typeName
      }
      let parame = {
        title: newArr.length ? newArr[0] : newRemBJArr[0],
        arr: newArr,
        isSelect: true
      }
      this.$wx.getStore('shoppingCart', [parame])
      this.$wx.getStore('bzGoods', newRemBJArr)
      this.$wx.navigator('/pages/chooseAnOffer/listOfGoods')
    },
    goToTab (url) {
      this.$wx.switchTab(url)
    },
    goTo (url) {
      this.$wx.navigator(url)
    },
    ...mapMutations({
      setLogin: 'SET_LOGIN',
      setuserInfo: 'SET_USERINFO'
    })
  }

}
</script>

<style scoped lang="scss">
@import '@/common/scss/base.scss';
.header {
  .header-notice {
    background: #eaeaea;
    height: 56px;
    @include fjc(flex-start);
    .laba {
      background: #eaeaea;

      height: 56px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 11;
      img {
        @include wh(33, 33);
        padding: 12px 20px;
        animation: kf-laba-animation 1s linear infinite;
      }
    }
    .content {
      min-width: 100%;
      animation: kf-marque-animation 20s linear infinite;
      @include fontSize(28);
      @include color666;
      text {
        white-space: nowrap;
        margin-right: 30px;
      }
    }
  }
  .header-userinfo {
    background: $primaryColor;
    height: 271px;
    padding: 0 30px;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    .userinfo-wrap {
      @include fjc;
      width: 100%;
      .userinfo-nickname {
        @include fjc(flex-start);
        .lf-img {
          img {
            @include wh(136, 136);
            border-radius: 100%;
            margin-right: 13px;
          }
        }
        .rt-name {
          > div {
            color: #fff;
            @include fontSize(32);
          }
          > div:last-child {
            margin-top: 7px;
            @include fontSize(28);
          }
        }
      }
      .jms {
        @include fontSize(28);
        color: #fff;
      }
    }
  }
  .not-authorization {
    .rt-name {
      button {
        @include fontSize(28);
      }
    }
  }
}

.content-main {
  background: #fff;
  .last-purchase {
    .purchase-timer {
      @include fjc;
      padding: 0 30px;
      height: 75px;
      border-top: 20px solid $mgColor;
      > div {
        @include fontSize(28);
        @include color666;
      }
      > div:first-child {
        @include ifjc(flex-start);
        span {
          display: inline-flex;
          @include wh(6, 22);
          background: $primaryColor;
          margin-right: 10px;
        }
      }
    }
    .purchase-goods {
      .goods-list {
        background: #f6f6f6;
        padding: 19.38px;
        width: 100%;
        box-sizing: border-box;
        ul {
          @include fjc(flex-start);
          li {
            @include wh(165, 165);
            @include ifjc(center);
            min-width: 165px;
            background: #fff;
            margin-right: 19.38px;
            img {
              @include wh(132, 132);
            }
          }
        }
      }
    }
    .buy-again {
      padding: 25px 0;
    }
  }
}

.footer {
  background: #fff;
  .fun-bar {
    border-top: 20px solid $mgColor;
    padding: 0 48px;
    overflow: hidden;
    li {
      width: 50%;
      float: left;
      height: 200px;
      @include ifjc(center);
      flex-flow: row wrap;
      align-content: center;
      img {
        @include wh(73, 73);
      }
      > div {
        width: 100%;
        @include fontSize(30);
        @include color666;
        text-align: center;
      }
    }
    li:nth-child(1),
    li:nth-child(2) {
      @include border-bottom(#eaeaea);
    }
  }
}
.versions {
  @include fjc(center);
  @include fontSize(24);
  @include color666;
  padding: 40px;
}
@keyframes kf-marque-animation {
  0% {
    transform: translateX(90%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes kf-laba-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
</style>
